<!DOCTYPE HTML>
<html>
<head>
	<meta name="format-detection" content="telephone = no">
	<meta name="msapplication-tap-highlight" content="no">
	<meta charset = "utf-8"/>
	<meta name="viewport" content="user-scalable = no, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, width = device-width">

	<link rel="stylesheet" href="css/view.css">
	<link rel="stylesheet" href="css/index.css">

	<title>view-event</title>
</head>
<body>
	<section data-view-id="page1" data-view="true">
		<header>
			<span class="nav-back" data-view-rel=":back"></span>
			自定义事件
			<a class = "nav-homepage" data-view-rel = "@../../../index.html"></a>
		</header>
		<div class = "body">
			<h1>开发者可以使用“事件驱动”设计模式解决问题</h1>
			<div class = "btn add-listener">监听自定义的“数据加载完毕” 事件</div>
			<div class = "btn fire-event">发起 “数据加载完毕” 事件</div>
			<div class = "btn get-data">获取 “数据加载完毕” 事件关联的数据</div>
		</div>
	</section>

	<script type = "text/javascript" src = "js/plugin/view.min.js"></script>
	<script type = "text/javascript">
	var view = View.ofId("page1");
	var addObj = view.find(".btn.add-listener"),
		fireObj = view.find(".btn.fire-event"),
		getDataObj = view.find(".btn.get-data");
		
	addObj.addEventListener("click", function(){
		view.on("data.obtained", function(e){
			alert("捕捉到数据：" + JSON.stringify(e.data));
		});
	});	
	fireObj.addEventListener("click", function(){
		view.fire("data.obtained", {
			goodsId: "G01",
			goodsName: "商品名称",
			price: "15",
			timestamp: Date.now()
		});
	});	
	getDataObj.addEventListener("click", function(){
		alert("数据：" + JSON.stringify(view.getLatestEventData("data.obtained")));
	});
	</script>
</body>
</html>